<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 闭包-计数器困境-2</title>
</head>

<body>
    <!-- 如果我在函数内声明计数器，如果没有调用函数将无法修改计数器的值 -->
    <p>局部变量计数。</p>
    <button type="button" onclick="myFunction()">计数!</button>
    <p id="demo">0</p>
    <script>
        function add() {
            var counter = 0;
            return counter += 1;
        }
        function myFunction() {
            document.getElementById("demo").innerHTML = add();
        }
    </script>
    <!-- 以上代码将无法正确输出，每次我调用 add() 函数，计数器都会设置为 1。 -->
</body>

</html>